<template>
    <div class="all">
        <!-- <div style="text-align:center;font-size:28px;font-weight:bold;">{{$route.name}}</div> -->
        <div class="search">
            <el-form ref="form" :model="submeterSearch" :inline="true" size="mini">
                <el-form-item label="日期：">
                    <el-date-picker
                        v-model="submeterSearch.dataTime"
                        type="daterange"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions"
                    ></el-date-picker>
                </el-form-item>
                <!-- <el-form-item label="城市：">
                    <el-input v-model="submeterSearch.area" clearable placeholder="请输入城市"></el-input>
                </el-form-item>
                <el-form-item label="商户号：">
                    <el-input
                        v-model="submeterSearch.merchantNumber"
                        clearable
                        placeholder="请输入商户号"
                    ></el-input>
                </el-form-item>
                <el-form-item label="设备号：">
                    <el-input
                        v-model="submeterSearch.equipmentNumber"
                        clearable
                        placeholder="请输入设备号"
                    ></el-input>
                </el-form-item>-->
                <el-form-item>
                    <el-button type="primary" @click="searchClick(2)">查 询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="table">
            <!-- 表格 -->
            <el-table
                :data="submeterTable"
                border
                height="560"
                :style="{width:screenWidth+'px'}"
                :cell-style="cellStyle"
                :header-cell-style="rowClass"
                @selection-change="allSelectionChange"
            >
                <!-- <el-table-column type="selection" width="60px"></el-table-column> -->
                <el-table-column type="index" label="序号" width="80px"></el-table-column>
                <el-table-column label="时间" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.create_time*1000 | formatDate }}</span><!--  {{ scope.row.create_time*1000 | formatDateBehind }} -->
                    </template>
                </el-table-column>
                <el-table-column label="设备号" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.equipment_id | filequ }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="城市" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.shop_id | filcity }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="商户号" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.business_id | filbusiness }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="位置" width="190px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.shop_id | fillong }},{{ scope.row.shop_id | fillat }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="门店名称" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.shop_id | shopname }}</span>
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip label="门店地址" width="200px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.shop_id | filress }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="洗车台次" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.car_num ? scope.row.car_num : 0 }}次</span>
                    </template>
                </el-table-column>
                <el-table-column label="洗车台次(小汽车)" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.car_num ? scope.row.car_num : 0 }}次</span>
                    </template>
                </el-table-column>
                <el-table-column label="洗车台次(SUV)" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.suv_num ? scope.row.suv_num : 0 }}次</span>
                    </template>
                </el-table-column>
                <el-table-column label="洗车台次(MPV)" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.mpv_num ? scope.row.mpv_num : 0 }}次</span>
                    </template>
                </el-table-column>
                <el-table-column label="非会员消费金额" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.money_nonmember }}元</span>
                    </template>
                </el-table-column>
                <el-table-column label="会员消费金额" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.money_member }}元</span>
                    </template>
                </el-table-column>
                <el-table-column label="服务收益" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.service_money }}元</span>
                    </template>
                </el-table-column>
                <el-table-column label="售后收益" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.sale_money }}元</span>
                    </template>
                </el-table-column>
                <el-table-column label="优惠总金额" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.coupon_money }}元</span>
                    </template>
                </el-table-column>
                <el-table-column label="客单价" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.coupon_money }}元</span>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination
                @size-change="pageCount"
                @current-change="currentPageCount"
                :current-page="currentPage"
                :page-sizes="[100, 500,1000,1500, 2000]"
                :page-size="currentCount"
                layout="prev, pager, next, jumper, sizes,total"
                :total="pageResultSize"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
import "../../../static/scss/page.scss";
import utils from "../../util/request";
import {formatDate} from "../../util/time.js";
import {timetamp} from "../../util/time.js";
import {timedata} from "../../util/time.js";
var that
export default {
    data() {
        return {
            // 分页
            currentPage: 1, //初始页面
            currentCount: 100, //当前页面的数据数量
            pageResultSize: 10, //表格数据总数
            screenWidth: window.innerWidth, //可视宽度
            shopname: null,
            businessname: null,
            equipmentdata: null,
            submeterSearch: {
                //搜索
                dataTime: "", //时间段
                area: "", //城市
                merchantNumber: "", //商户号
                equipmentNumber: "" //设备号
            },
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            },
            submeterTable: [
                {
                    equipmentNumber: "123", //设备号
                    area: "123", //城市
                    merchantNumber: "456", //商户号
                    location: "经纬度", //位置
                    storeName: "分行", //门店名称
                    storeAddress: "南山", //门店地址
                    allCarWash: "10", //洗车台次
                    smallCarWash: "5", //洗车台次(小汽车)
                    suvCarWash: "3", //洗车台次(SUV)
                    mpvCarWash: "2", //洗车台次(MPV)
                    oneConsumeMoney: "18", //非会员消费金额
                    twoConsumeMoney: "26", //会员消费金额
                    serviceRevenue: 18, //服务收益
                    afterEarnings: 10, //售后收益
                    perCustomer: 2.8 //客单价
                },
                {
                    equipmentNumber: "123", //设备号
                    area: "123", //城市
                    merchantNumber: "456", //商户号
                    location: "经纬度", //位置
                    storeName: "分行", //门店名称
                    storeAddress: "南山", //门店地址
                    allCarWash: "10", //洗车台次
                    smallCarWash: "5", //洗车台次(小汽车)
                    suvCarWash: "3", //洗车台次(SUV)
                    mpvCarWash: "2", //洗车台次(MPV)
                    oneConsumeMoney: "18", //非会员消费金额
                    twoConsumeMoney: "26", //会员消费金额
                    serviceRevenue: 18, //服务收益
                    afterEarnings: 10, //售后收益
                    perCustomer: 2.8 //客单价
                },
                {
                    equipmentNumber: "123", //设备号
                    area: "123", //城市
                    merchantNumber: "456", //商户号
                    location: "经纬度", //位置
                    storeName: "分行", //门店名称
                    storeAddress: "南山", //门店地址
                    allCarWash: "10", //洗车台次
                    smallCarWash: "5", //洗车台次(小汽车)
                    suvCarWash: "3", //洗车台次(SUV)
                    mpvCarWash: "2", //洗车台次(MPV)
                    oneConsumeMoney: "18", //非会员消费金额
                    twoConsumeMoney: "26", //会员消费金额
                    serviceRevenue: 18, //服务收益
                    afterEarnings: 10, //售后收益
                    perCustomer: 2.8 //客单价
                }
            ]
        };
    },
    filters:{
        // 加盟商的过滤
        filbusiness(name){
            if(that.businessname !== null){
                that.businessname.forEach(item=>{
                    name === item.id ? name = item.merchant_num : '';
                })
            }else{return}
            return name
        },
        // 店铺的过滤
        shopname(id){
            if(that.shopname !== null){
                that.shopname.forEach(item=>{
                    id === item.id ? id = item.name : '';
                })
            }else{return}
            return id
        },
        // 城市
        filcity(city){
            if(that.shopname !== null){
                that.shopname.forEach(item=>{
                    city === item.id ? city = item.city : '';
                })
            }else{return}
            return city
        },
        // 经度
        fillong(long){
            if(that.shopname !== null){
                that.shopname.forEach(item=>{
                    long === item.id ? long = item.longitude : '';
                })
            }else{return}
            return long
        },
        // 纬度
        fillat(lat){
            if(that.shopname !== null){
                that.shopname.forEach(item=>{
                    lat === item.id ? lat = item.latitude : '';
                })
            }else{return}
            return lat
        },
        // 地址
        filress(ress){
            if(that.shopname !== null){
                that.shopname.forEach(item=>{
                    ress === item.id ? ress = item.address : '';
                })
            }else{return}
            return ress
        },
        // 设备
        filequ(id){
            if(that.equipmentdata !== null){
                that.equipmentdata.forEach(item=>{
                    id = item.id ? id = item.number : ""
                })
            }else{return}
            return id
        },
        // 时间
		formatDate(time){
			var date = new Date(time);
			return formatDate(date, 'yyyy-MM-dd');
		},
		formatDateBehind(time){
			var date = new Date(time);
			return formatDate(date, 'hh:mm:ss')
		}
    },
    methods: {
        searchClick(num) {
            // 查询
            let data = {page:this.currentPage,list_rows:this.currentCount};
            if(this.submeterSearch.dataTime !== "" && this.submeterSearch.dataTime !== null){
                data.start_time = timetamp(String(this.submeterSearch.dataTime[0]));//开始时间
                data.end_time = timedata(this.submeterSearch.dataTime[1]);//结束时间))
            }
            utils.request("/financeSub/list","post",JSON.stringify(data)).then(resp=>{
                console.log(resp)
                this.submeterTable = resp.data.data.data;
                this.pageResultSize = resp.data.data.total;
                if(num === 2){
                    res.data.data.total 
                    ? this.$message({
                        message: "找到"+res.data.data.total+"条数据",
                        type: "success"
                    }) : this.$message("没有符合条件的数据")
                }else{return}
            })
        },
        //   表格居中
        cellStyle: function({ row, column, rowIndex, columnIndex }) {
            return "text-align:center;";
        },
        rowClass: function({ row, rowIndex }) {
            return "text-align:center;";
        },
        allSelectionChange: function(val) {
            // 获取选中的内容
            console.log(val);
            this.selectTable = val;
        },
        // 每页数据的数量
        pageCount: function(val) {
            this.currentCount = val;
            this.searchClick(1)
        },
        // 点击的第几页
        currentPageCount: function(val) {
            this.currentPage = val;
            this.searchClick(1)
        }
    },
    created() {
        utils.request("/shop/list","post",JSON.stringify({page:1,list_rows:9999999})).then(resp=>{
            this.shopname = resp.data.data.data;
        })
        utils.request("/equipment/list","post",JSON.stringify({page:1,list_rows:9999999})).then(resp=>{
            this.equipmentdata = resp.data.data.data;
        })
        utils.request("/business/list","post",JSON.stringify({page:1,list_rows:9999999})).then(resp=>{
            this.businessname = resp.data.data.data;
        })
        setTimeout(()=>{
            this.searchClick(1)
        },300)
        
        // utils
        //     .request("summaryAnnexes", "post")
        //     .then(res => {
        //         console.log(res);
        //     });
    },
    beforeCreate(){
        that = this;
    }
};
</script>




